<template>
	<view class="page">
		<topVue title="编辑收货地址"></topVue>
		<view class="inpVue margin20">
			<view class="label">联系人信息</view>
			<input type="text" placeholder="收货人姓名" v-model="name"/>
			<input type="text" placeholder="手机号码" v-model="phone"/>
		</view>
		<view class="inpVue margin40">
			<view class="label">收货地址</view>
			<view class="selectVue flex-between align-center" @click="isAddress=true">
				<text>{{ area  }}</text>
				<image src="../../static/more.png" style="width: 32rpx; height: 32rpx;"></image>
			</view>
			<textarea v-model="address" placeholder="详细地址：如道路、门牌号、小区、楼栋号、单元室等"></textarea>
		</view>
		<view class="inpVue margin40 flex-between align-center">
			<view class="label">设置默认地址</view>
			<u-switch v-model="checked" active-color="#1CC289" size="36"></u-switch>
		</view>
		
		<view class="loginBtn margin50" @click="submit()">保存地址</view>
		
		<u-picker mode="region" v-model="isAddress" confirm-color="#1CC289" @confirm="selectFun"></u-picker>
	
		<Loading :num="2" v-if="loading"></Loading>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				name: "",
				phone: "",
				area: "",
				areaId: "",
				address: "",
				checked: false,
				isAddress: false,
				id: "",
				loading: false
			}
		},
		onLoad(option) {
			const detail = JSON.parse(decodeURIComponent(option.item));
			console.log(detail)
			this.name = detail.name
			this.phone = detail.mobile
			this.area = detail.areaName
			this.areaId = detail.areaId
			this.address = detail.detailAddress
			this.id = detail.id
			this.checked = detail.defaultStatus
		},
		methods: {
			selectFun(e){
				this.area = e.province.label + "-" + e.city.label + "-" + e.area.label
				this.areaId = e.area.value
			},
			async submit(){
				if(!this.name) return this.$u.toast("请输入联系人")
				if(!this.$u.test.mobile(this.phone)) return this.$u.toast("请输入正确手机号")
				if(!this.areaId) return this.$u.toast("请选择地区")
				if(!this.address) return this.$u.toast("请输入详细地址")
				this.loading = true
				const result = await this.$request("/app-api/member/address/update", "PUT",{
					name: this.name,
					mobile: this.phone,
					areaId: this.areaId,
					detailAddress: this.address,
					defaultStatus: this.checked,
					id: this.id,
					areaName: this.area
				})
				this.loading = false
				if(result.code===0) {
					this.$u.toast("修改成功")
					setTimeout(()=>{
						this.$tools.back()
					},1000)
				}else{
					this.$u.toast(result.msg)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.inpVue {
		width: 100%;
		padding: 0 30rpx;
		.label {
			color: #4B5563;
		}
		input {	
			width: 100%;
			height: 92rpx;
			border: #F3F4F6 1rpx solid;
			border-radius: 16rpx;
			display: block;
			color: #333;
			font-size: 28rpx;
			margin-top: 20rpx;
			padding-left: 20rpx;
		}
		textarea {
			width: 100%;
			height: 168rpx;
			border: #F3F4F6 1rpx solid;
			border-radius: 16rpx;
			display: block;
			box-sizing: border-box;
			color: #333;
			font-size: 28rpx;
			margin-top: 20rpx;
			padding: 20rpx;
		}
		.selectVue {
			width: 100%;
			height: 92rpx;
			border: #F3F4F6 1rpx solid;
			border-radius: 16rpx;
			padding: 0 20rpx;
			margin-top: 20rpx;
			text {
				color: #333;
			}
		}
	}
	.loginBtn {
		width: 690rpx;
		height: 92rpx;
		background: linear-gradient(to right, #1CC289, #60A5FA);
		border-radius: 15rpx;
		line-height: 92rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
	}
</style>